<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  layout:decorator="layout">
  <head>
  	<title>比赛晋级管理</title>
  	<script th:inline="javascript"  type="text/javascript">
  	var id = [[${number.id}]];
  	$(function(){
  		setMenu("比赛渠道");
		var beginAt = new Date().DateAdd(-7).Format("yyyy-MM-dd");
		var endAt = new Date().Format("yyyy-MM-dd");
		var dateRange = new pickerDateRange('listStageDate', {
            isTodayValid : false,
            startDate:beginAt,
            endDate:endAt,
            defaultText : ' 至 ',
            theme : 'ta',
            success : function(obj) {
            	$(".detail-s-bar").removeClass("active");
            	if(obj.endDate == ''){
            		obj.endDate = obj.startDate;
            	}
            	if(obj.endDate == ''){
            		return;
            	}
            	findDate(obj.startDate,obj.endDate,0);
            }
        });
		$('.opt_sel').on('click',function(e){setTimeout(function(){ $('#listStageDate').click();}, 0)});
		beforeDate(-14,null,14);
		
		$('#modal .detail-table a').on('click',function(){
			/* $.fn.jqLoading({ height: 100, width: 240, text: "" }); */
			location.href="exportExecl?id="+id;
			/* $(this).jqLoading("destroy"); */
		});
	});
  	function findDate(beginAt, endAt,flg){
		var head = [{name:'报名成功人数', show:true, open:true},{name:'报名人数（提交）', show:true, open:false}];
		$.ajaxData({url:"getEchartsDatas", data:{id:id,beginAt:beginAt,endAt:endAt,flg:flg}, success:function(ret){
			var x=[];
			var yData = [];
			$.each(ret, function(i,v){
				x.unshift(v.date);
				v.countHtml = '';
				$.each(head, function(i2,v2){
					v.countHtml += "<td>"+(v[v2.name] == null ? 0 : v[v2.name]) +"</td>"
				});
			});
			$.each(head, function(i,v){
				if(v.show){
    				var show = (i==0?true:false);
    				var headData = {name:v.name,show:v.open,data:[]};
    				$.each(ret, function(i2,v2){
    					var count = (v2[v.name]==null?0:v2[v.name])
    					headData.data.unshift(count)
       				});
    				yData.push(headData);
				}
			})
				$("#echarts").echartsLine({xData:x, yData:yData});
		}});
		
  		$("#page").page({url:"getData",data:{evaluateId:id,beginAt:beginAt,endAt:endAt,flg:flg},success:function(obj){
  			$.each(obj.obj.content, function(i,v){
  				v.createdAt = new Date(v.createdAt).Format("yyyy.MM.dd");
  			});
  			$("#pageTabel").loadData(obj.obj);
  			$("span[data='look']").each(function(){
    			var text = $(this).attr("data-text");
    			if(text != ''){
    				var textHtml = "";
    				var textObj = eval("("+text+")");
    				$.each(textObj, function(i,v){
    					textHtml += "<div>"+i+":"+v+"</div>";
    				});
    				$(this).jjinfo(textHtml);
    			}
    		});
  		}});
	};
  	function beforeDate(day, obj,flg){
		if(obj != null){
			$(".detail-s-bar").removeClass("active");
			$(obj).addClass("active");
		}
		var beginAt = new Date().DateAdd(day).Format("yyyy-MM-dd");
		var endAt = new Date().Format("yyyy-MM-dd");
		findDate(beginAt, endAt,flg);
	};
  	</script>
  </head>
  
  <body>
	<div layout:fragment="content" class="content" id="modal">
       	<div class="modal">
       		<div class="detail">
       			<div class="detail-cont">
       				<div class="detail-c-box1"> <!-- active -->
       					<div class="detail-c">
       						<div class="detail-c-label">报名成功人数</div>
          					<div class="detail-c-count"><strong th:text="${number.successCount}"></strong></div>
          					<div class="detail-c-day">
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c" th:text="${number.successCountDay}" ></label>
							</div>
       					</div>
       				</div>
       				<div class="detail-c-box1">
       					<div class="detail-c">
       						<div class="detail-c-label">报名付费</div>
       						<div class="detail-c-count"><strong th:text="${number.orderSum}"></strong></div>
       						<div class="detail-c-day">
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c" th:text="${number.orderSumDay}" ></label>
							</div>
       					</div>
       				</div>
       			</div>


				<div class="detail-row">
	       				<div class="detail-s">
	       				   <span class="detail-s-bar"><span class="detail-s-btn">报名人数</span></span>
	       					<span class="detail-s-bar" onclick="beforeDate(-7, this,7)"><span class="detail-s-btn">7天</span></span>
	       					<span class="detail-s-bar active" onclick="beforeDate(-14, this,14)"><span class="detail-s-btn">14天</span></span>
	       					<span class="detail-s-bar" onclick="beforeDate(-30, this,30)"><span class="detail-s-btn">30天</span></span>
	       					<span class="detail-s-bar" onclick="beforeDate(null, this,100)"><span class="detail-s-btn">全部</span></span>
							<div class="ta_date" style="">
		                        <span class="date_title" id="listStageDate">请选择日期</span>
		                        <a class="opt_sel" href="javascript:void(0)">
		                            <i class="i_orderd"></i>
		                        </a>
		                    </div>
		                    <div id="datePicker"></div>
	       				</div>
       				</div>
       				<div style="height: 300px;" id="echarts"></div>
       			
     		<div class="detail-table">
     			<h4 class="detail-table-title">数据明细
				<span class="detail-table-more">
					<a href="#"><i class="icon_export"></i>导出CSV</a>
				</span>
			</h4>
		    <div class="table_list">
               <div class="">
                   <table class="table table-layout">
                       <thead>
                            <tr>
		                      		   <th width="10%" class="order desc" data="asc" onclick="$('#page').pageReload({sort:'createdAt,'+$(this).attr('data')});">报名时间</th>
		                               <th width="5%" >参赛编号</th>
		                               <th width="10%" >用户（ID）</th>
		                               <th width="10%" >电话</th>
		                               <th width="14%" >渠道</th>
		                               <th width="5%" >报名信息</th>
		                               <th width="10%" >
										<div class="caret">
                                                <div class="caret-menu">
                                                	<span class="btn active" onclick="$('#page').pageReload({verify:''});">全部状态</span>
                                                    <span class="btn" onclick="$('#page').pageReload({verify:'NotPass'});">未通过</span>
                                                    <span class="btn" onclick="$('#page').pageReload({verify:'Waiting'});">等待</span>
                                                    <span class="btn" onclick="$('#page').pageReload({verify:'Pass'});">通过 </span>
                                                </div>
                                                <span>报名状态</span>
                                            </div>
		                               </th>
		                               <th width="10%" >
											<div class="caret">
                                                 <div class="caret-menu">
                                                 	<span class="btn active" onclick="$('#page').pageReload({state:''});">全部状态</span>
                                                     <span class="btn" onclick="$('#page').pageReload({state:'LIVE'});">已付费</span>
                                                     <span class="btn" onclick="$('#page').pageReload({state:'UNPAID'});">待支付</span>
                                                     <span class="btn" onclick="$('#page').pageReload({state:'FREEWAITINGVERIFY'});">待审核</span>
                                                 </div>
                                                 <span>付款状态</span>
                                             </div>
		                               </th>
		                               <th width="5%" >票种</th>
		                               <th width="5%" >付款</th>
		                               <th width="20%" >备注</th>
                           </tr>
                       </thead>
                       <tbody>
                     <script type="text/template" id="pageTabel">
   						#for(data:content)#
							<tr>
								<td>#{data.createdAt}#</td>
								<td>#{data.id}#</td>
								<td>#{data.userName}# (#{data.userNumber}#)</td>
								<td>#{data.userPhone}#</td>
								<td>#{data.refName}#</td>
								<td><span data='look' data-text='#{data.text}#' class="table-icon table-icon-info"></span></td>
								<td>#{data.verifyDesc}#</td>
								<td>#{data.stateDesc}#</td>
								<td>#{data.epName}#</td>
								<td>#{data.orderItemPrice}#</td>
								<td class="remark" title=" #{data.remark}# ">#{data.remark}#</td>
							</tr>
						#endfor#
					 </script>
                     </tbody>
                 </table>
                 <div id="page"></div>
             </div>
          </div>
          </div>
          
       	</div>
	</div>
	
	</div>
  </body>
</html>